<template>
  <div class="login-one">

          <el-row>
              <el-col :span="8">&nbsp;</el-col>
              <el-col :span="8">
                <br><br><br><br><br><br><br><br><br>
                <h1 align="center" style=" font-family: Helvetica;">金融知识图谱系统后台</h1>
                <el-tabs type="border-card">
                  <el-tab-pane label="用户登录">
                    <el-form label-width="80px" style="background-color: white;border-radius: 3%;padding-top: 5px">

                      <el-form-item label="用户名">
                        <el-col :span="20">
                          <el-input v-model="name" ></el-input>
                        </el-col>
                      </el-form-item>

                      <el-form-item label="密码">
                        <el-col :span="20">
                          <el-input v-model="password" show-password></el-input>
                        </el-col>
                      </el-form-item>

                      <el-form-item>
                        <el-col :span="6">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-button type="success" icon="el-icon-s-custom" size="mini" @click="login" >登录</el-button>
                          <el-button type="success" icon="el-icon-s-custom" size="mini" @click="change_password" >密码修改</el-button>
                        </el-col>
                        <el-col :span="8">&nbsp;</el-col>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="邮箱登录">
                    <el-form label-width="80px" style="background-color: white;border-radius: 3%;padding-top: 5px">


                      <el-form-item label="邮箱">
                        <el-col :span="20">
                          <el-input v-model="email" ></el-input>
                        </el-col>
                      </el-form-item>

                      <el-form-item label="验证码">
                        <el-col :span="20">
                          <el-input v-model="code" show-password></el-input>
                        </el-col>
                      </el-form-item>

                      <el-form-item>
                        <el-col :span="6">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-button type="success" icon="el-icon-s-custom" size="mini" @click="send_code" >发送验证码</el-button>
                          <el-button type="success" icon="el-icon-s-custom" size="mini" @click="code_login" >登录</el-button>


                        </el-col>
                        <el-col :span="8">&nbsp;</el-col>
                      </el-form-item>
                    </el-form>

                  </el-tab-pane>

                </el-tabs>

              </el-col>
              <el-col :span="8">&nbsp;</el-col>
          </el-row>
  </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
          return {
            name:"",
            password:"",
            email:"",
            code:""
          }
        },
      methods:{ //用户登录
          login(){
            const self = this;
            this.$http.get("/api/login/",{params:{name:self.name,password:self.password}}).then(function (res) {
              if(res.data.code==200){
                self.$message(res.data.msg);
                //跳转到知识图谱后台
                self.$router.push("/index")
              }else{
                self.$message(rs.data.msg);
              }
            })
          },
        change_password(){
            const self = this;
            //跳转到密码修改页面
            self.$router.push("/changepassword")
        },
        send_code(){ //发送验证码
          const self = this;
          this.$http.get("/api/send_email/",{params:{email:self.email}}).then(function (res) {
            if(res.data.code==200){
              self.$message(res.data.msg);
            }else{
              self.$message(res.data.msg);
            }
          })
        },
        code_login(){ //验证码登录
            const self = this;
            this.$http.get("/api/code_login/",{params:{code:self.code}}).then(function (res) {
              if(res.data.code==200){
                self.$message(res.data.msg);
                self.$router.push("/index")
              }else{
                self.$message(res.data.msg);
              }
            })

        }
      }

    }
</script>

<style scoped>
  @import url('../../assets/css/login.css');


</style>
